<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>007_定时器的应用</title>
   <style type="text/css">
       *{
           margin: 0;
           padding: 0;
       }
       .box {
           width: 100px;
           height: 100px;
           background-color: yellowgreen;
           position: absolute;
           left: 0;
       }
       #box2 {
           background-color: red;
           top: 200px;
       }
   </style>
</head>
<body>
    <button id="btn">向右移动</button>
    <button id="btn02">向左移动</button>
    <button id="btn03">点我，红色方块向右移动</button>
    <button id="btn04">测试按钮</button>
    <br/>
    <br/>
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>

    <div style="width: 0; height: 1000px; border-left: 1px black solid; position: absolute; left: 800px; top: 0"></div>
<script type="text/javascript">
    var btn = document.getElementById("btn");
    var btn02 = document.getElementById("btn02");
    var btn03 = document.getElementById("btn03");
    var btn04 = document.getElementById("btn04");

    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");

    /**
     *
     * 定时器标识的变量：
     * 目前我们的定时器的标识由全局变量timer保存，所有正在执行的定时器都在这个变量中保存。
     *
     */
    // var timer;
    btn.onclick = function () {

 /*       clearInterval(timer);

        // 开启定时器用来执行动画效果
        timer = setInterval(function () {
            // 获取box1原来的left
            var oldValue = parseInt(getStyle(box1, 'left'));

            // 在旧值的基础上增加
            var newValue = oldValue + 13;
            if(newValue > 800) {
                newValue = 800;
            }

            // 将新值设置给box1
            box1.style.left = newValue + "px";

            // 当元素移动到800像素时，使其停止执行动画
            if(newValue >= 800) {
                // 到达目标，停止动画
                clearInterval(timer);
            }
            
        }, 30);*/

        move(box1,'left', 800, 10);
    };
    btn02.onclick = function () {
        move(box1,'left', 0, 10);
    };
    btn03.onclick = function () {
      move(box2, 'left' ,800, 10);
    };
    btn04.onclick = function () {
        move(box2, 'width' ,800, 10, function () {
            move(box2, 'height', 400, 10, function () {
                move(box2, 'top', 300, 10, function () {
                    move(box2, 'width', 100, 10, function () {
                        move(box2, 'height', 100, 10, function () {
                            alert("hello world");
                        })
                    })
                })
            });
        });
    };




    /**
     * 参数：
     *  obj： 要执行动画的对象
     *  attr: 要执行动画的样式, 比如 top left with
     *  target：执行动画的目标位置
     *  speed：移动的速度
     *  callback: 回调函数，这个函数将会在动画执行完成以后执行
     *
     */
    function move(obj, attr, target, speed, callback) {
        clearInterval(obj.timer);

        // 获取元素目前的位置
        var current = parseInt(getStyle(obj, attr));

        /**
         * 如果从左向右移动 speed 为正值
         * 如果从右向左移动，speed为负值
         */
        if(current > target) {
            speed = -speed;
        }


        /**
         * 向执行动画的对象中添加一个属性，用来保存它自己的定时器标识
         */
        obj.timer = setInterval(function () {
            var oldValue = parseInt(getStyle(obj, attr));

            var newValue = oldValue + speed;

            /**
             *  向左移动时，需要判断newValue是否小于target
             *  向右移动时，需要判断newValue是否大于target
             */
            if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
                newValue = target;
            }
            obj.style[attr] = newValue + "px";
            if(newValue == target) {
                clearInterval(obj.timer);

                // 动画执行完毕，调用回调函数
                callback && callback();
            }
        }, 30);
    }

    /**
     * 用来获取指定元素的当前样式
     * @param obj 要获取样式的元素
     * @param name 要获取的样式名
     * @returns {*}
     *
     * ps: 在IE浏览器中如果没有指定样式值，则可能获取到的是auto
     */
    function getStyle(obj, name) {
        if(window.getComputedStyle) {
            return getComputedStyle(obj, null)[name]; // 正常浏览器的方式
        } else {
            return obj.currentStyle[name]; // IE8的方式
        }
    }
</script>
</body>
</html>